@import "basic.css";
@import "index.css";


/* 左侧  商店链接 */
.zuo_store_div_community{
    box-sizing:border-box;
    align-items: center;
    display:flex;
    margin-top: 50px;
    margin-left: 7%;
    width: 80%;
    height: 50px;
    /* padding: */
    position: relative;
    border-radius: 10px;
    background-color: rgb(29, 29, 29);
    /* border: 1px red solid; */
}
.zuo_store_div_community:hover {
    background-color: rgb(70, 70, 70);
}
.zuo_store_div_community:active{
    border: 2px whitesmoke solid;
}
.zuo_store_div_community img{
    float: left;
    width: 37%;
    margin-left: 10%px;
    margin-top: -4%;
    transform: rotate(30deg);
}
.zuo_store_div_community h1{
    font-size: 1.5em;
    font-weight: 530;
    color: azure;
    margin-left: 3%;
}
@media screen and (max-width:840px){
    .zuo_store_div img{
        display: none;
    }
    .zuo_store_div h1{
        /* align-items: center; */
        margin-left: 3px;
      
    }
}

/* 左侧社区 */
.zuo_me_div_community{
    box-sizing: border-box;
    align-items: center;
    display:flex;
    margin-top: 10px;
    margin-left: 7%;
    width: 80%;
    height: 50px;
    position: relative;
    border-radius: 10px;
    background-color: rgb(68, 68, 68);
}
.zuo_me_div_community:hover {
    background-color: rgb(70, 70, 70);
}
.zuo_me_div_community:active{
    border: 2px whitesmoke solid;
}
.zuo_me_div_community img{
    float: left;
    width: 30%;
    margin-left: 10%px;
    margin-top: 2%;
}
.zuo_me_div_community h2{
    color: azure;
    font-size: 1.5em;
    font-weight: 530;
    margin-left: 10%;
}

.zuo_me_div_community img{
        float: left;
        width: 28%;
        margin-left: 10%px;
        margin-top: 2%;
}
.zuo_me_div_community h3{
    color: azure;
    font-size: 1.5em;
    font-weight: 530;
    margin-left: 13px;
    margin-left: 12%;
}
@media screen and (max-width:840px){
    .zuo_me_div img{
        display: none;
    }
    .zuo_me_div h3{
        margin-left: 3px;
      
    }
}


/* 内容div */
.community_container_div{

    border-top: 2px solid white;
    flex-wrap: wrap;
    display: flex;
    z-index: 1;
    position:relative;
    width: 82%;
    margin-left: 18%;
    margin-top: 130px;
    height: 1200px;
    background-color: rgb(29, 29, 29);
    /* background-color: rgb(70, 70, 70); */

}
/* 顶部title */
.community_title{
    margin-top: -20px;
    display: flex;
    align-items:space-between;
    width: 100%;
    height: 100px;
    display: flex;
    background-color: rgb(29, 29, 29);
    

}
.community_title div{
    border-radius: 10px;
    margin: auto auto;
    width: 120px;
    height: 60px;
    background-color: rgb(68, 68, 68);
    display: flex;
}
.community_title div:hover{
    background-color: rgb(116, 116, 116);
}

.community_title div h3{
    margin: auto auto;
    color: aliceblue;
}

.div_1{
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
        margin-top: 100px;

}
.div_1 img{
    border-radius: 10px;
    width: 45%;
    height: auto;
    margin: auto auto;


}
.div_1 img:hover{
    box-sizing: border-box;
    border: 2px white solid;
}

.div_2{
    position: absolute;
    display: flex;
    width: 100%;
    height: auto;
    background-color: rgb(29, 29, 29);
    margin-top: 550px;
}
.div_2 img{
    border-radius: 10px;
    width: 30%;
    height: auto;
    margin: auto auto;
    /* margin-top: -300px; */

}
.div_2 img:hover{
    box-sizing: border-box;
    border: 2px white solid;
}



